<template>
	<view class="msgPage">
		<view class="message-list">
			<!-- <view class="custom-nav-bar"> -->
			<!-- 返回按钮 -->
			<!-- <view class="nav-back" @click="goBack">
          <image src="/static/back.png" mode=""></image>
        </view> -->
			<!-- 页面标题 -->
			<!-- <view class="nav-title">消息列表</view>
      </view> -->
		</view>
		<view class="zpag">
			<z-paging ref="paging" v-model="messageArr" @query="queryList">
				<template #empty>暂无数据</template>
				<div class="messagelist">
					<div class="messageItem" v-for="(item, index) in messageArr" :key="index"
						@click="toMessDetail(item)">
						<!-- <image :src="item.avatar" mode="widthFix"></image> -->
						<div class="messagetxt">
							<div class="title">
								<p>{{ item.title }}</p>
								<span style="position: absolute; right: 50rpx">
									{{ item.createtime }}
								</span>
							</div>
							<div style="display: flex; align-items: center" class="cnt">
								{{ item.content }}
								<div v-if="item.status == 0" class="red"></div>
							</div>
						</div>
					</div>
				</div>
			</z-paging>
		</view>
	</view>
</template>

<script>
	// import ZPMixin from "@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin";
	import {
		getMessageLists
	} from "@/api/mine.js";
	import {
		getnew_listDetail
	} from "@/api/gent.js";
	export default {
		// mixins: [ZPMixin],
		data() {
			return {
				status: "nomore",
				formData: {
					page: 1,
					limit: 10,
					type: "",
				},
				messageArr: [],
			};
		},
		onLoad(option) {
			// console.log(option, 'oopppttt');
			this.formData.type = option.type;
		},
		onShow() {
			this.queryList(1, 10);
		},
		filters: {
			formatDate: function(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10) hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10) minutes = "0" + minutes;
				var time =
					date.getFullYear() +
					"-" +
					month +
					"-" +
					date.getDate() +
					" " +
					hours +
					":" +
					minutes;
				return time;
			},
		},
		methods: {
			async queryList(pageNo, pageSize) {
				const res = await getMessageLists({
					limit: pageSize,
					page: pageNo,
					type: this.formData.type,
				});
				if (res.response.statusCode === 200) {
					if (res.data.data.data.length != 0) {
						this.$refs.paging.complete(res.data.data.data);
					} else {
						this.$refs.paging.complete(false);
					}
				}
			},
			async getMessageLists() {
				const res = await getMessageLists(this.formData);
				if (res.response.statusCode === 200) {
					// console.log(res.data.data, 'res.data.data');
					this.messageArr = res.data.data.data;
					// 更新状态
					this.status =
						this.messageArr.length < this.formData.limit ? "nomore" : "loadmore";
					uni.hideToast();
				} else {
					this.status = "loadmore"; // 请求失败恢复状态
				}
			},
			async toMessDetail(item) {
				// type    0=无跳转,1=用户缴费消息,2=用户合同消息,3=房东报修消息
				if (item.type == 0) {
					return;
				} else if (item.type == 1) {
					uni.navigateTo({
						url: "/pages-lease/bill/bill-detail?id=" + item.other_id,
					});
				} else if (item.type == 2) {
					uni.navigateTo({
						url: "/pages-lease/contract/contract-view?house_id=" + item.other_id,
					});
				} else if (item.type == 3) {
					return;
				} else {
					uni.navigateTo({
						url: "/pages/mine/guideDetail?id=" + item.id + "&type=message",
					});
				}
				const res = await getnew_listDetail({
					id: item.id
				});
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.formData.page = 1; // 重置为第一页
				this.messageArr = []; // 清空当前列表数据
				this.getMessageLists(); // 请求第一页数据
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},
			//上拉加载
			onReachBottom() {
				console.log("Reached bottom. Status:", this.status);
				if (this.status === "loading" || this.status === "nomore") return;
				this.status = "loading";
				this.formData.page++; // 增加当前页码
				this.getMessageLists();
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.msgPage {
		min-height: 100vh;

		.messagelist {
			margin-top: 30rpx;
		}

		.zpag {
			// width: 100%;
			// position: absolute;
			// top: 150rpx;
		}
	}

	.red {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: red;
		margin-left: 10rpx;
		// position: absolute;
		// right: 20rpx;
		// top: 48%;
	}

	.message-list {
		width: 100%;
		height: 312px;
		padding-top: 10rpx;
		background: linear-gradient(171deg, #bdd3f7 0%, #f5f6fa 80%);
	}

	.custom-nav-bar {
		height: 50px;
		/* 导航栏高度 */
		display: flex;
		align-items: center;
		color: #000;
		padding: 30px 16px 16px 16px;
	}

	.nav-back {
		flex: 0 0 auto;
		cursor: pointer;

		image {
			width: 12px;
			height: 24px;
			// padding-left: 16px;
		}
	}

	.nav-title {
		flex: 1 1 auto;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 17px;
		color: #000000;
	}

	.messageItem {
		width: 84%;
		padding: 16px;
		margin: 0px auto 20px auto;
		background: linear-gradient(180deg,
				#f1f6ff 0%,
				rgba(255, 255, 255, 0.9) 100%);
		box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
		border-radius: 16px;
		display: flex;
		align-items: center;
		position: relative;

		image {
			width: 44px;
			height: 44px;
			margin-right: 12px;
		}

		.messagetxt {
			span {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #999999;
			}

			.cnt {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #999999;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				p {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 16px;
					color: #333333;
				}
			}
		}
	}
</style>